<template>
  <div class="zoomze-side-choose">
    <h4 class="title">
      {{ titleText }}
      <van-checkbox shape="square" label-position="left" v-model="tempAllChoosed" style="font-weight: 500;">全选</van-checkbox>
    </h4>
    <div v-if="itemsOrigin && itemsOrigin.length > 0" style="display: flex;">
      <van-sidebar class="left-side-bar" v-model="activeKey" :style="{'max-height': maxHeight, 'min-height': maxHeight}">
      <van-sidebar-item v-for="item in itemsOrigin" :title="item.text" :key="`${item.id}`" :info="returnChoosedNum(item)"/>
      </van-sidebar>
      <div class="right-content" :style="{'max-height': maxHeight, 'min-height': maxHeight}">
        <van-checkbox shape="square" label-position="left" v-for="(item, index) in tempList" v-model="item.choosed" :key="`${index}checkbox`" @change="checkboxClicked(item)"><span :class="{'active': item.choosed}">{{ item.text }}</span></van-checkbox>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
  export default {
    props: {
      default: { // 初始值
        type: Array,
        required: true
      },
      isJSON: { // 初始数据是否为JSON格式, 如果为json则进行一次parse
        type: Boolean,
        required: false,
        default: false
      },
      items: {
        type: Array,
        required: true
      },
      maxHeight: {
        type: String,
        default: '10vh'
      },
      titleText: {
        type: String,
        default: '请选择'
      },
    },
    data() {
      return {
        tempAllChoosed: false,
        tempList: [],
        activeKey: 0,
        itemsOrigin: null // 初始内容的deepCopy
      }
    },
    created() {
      
    },
    mounted() {// 设置初始选中
      this.itemsOrigin = this.$common.deepCopy(this.items)
      this.itemsOrigin.forEach(item => {
        item.info = item.children.length || ''
        item.children.forEach(child => {
          this.default.forEach(d => {
            
            if (this.isJSON) {
              if (d.id == child.id || d.uid == child.id) {
                child.choosed = true
              }
            } else {
              if(d == child.id || d == child.name || d == child.uid ) {
                child.choosed = true
              }
            }
          })
        })
      })
      this.tempList = this.itemsOrigin[0].children
      this.$emit('changed', this.getChoosedByName())
    },
    watch: {
      'items': {
        handler(newV, oldV) {
        }, 
        deep: true
      },
      'default': {
        handler(newV, oldV) {
          this.itemsOrigin.forEach(item => {
            item.children.forEach(child => {
              child.choosed = false
            })
          })
          this.itemsOrigin.forEach(item => {
            item.children.forEach(child => {
              newV.forEach(d => {
                if(d == child.id || d == child.name) {
                  child.choosed = true
                }
              })
            })
          })
        }, 
        deep: true
      },
      'activeKey': {
        handler(newV, oldV) {
          this.tempList = this.itemsOrigin[newV].children
        }, 
        deep: true
      },
      'tempList': {
        handler(newV, oldV) {
          let flag = true
          newV.forEach(item => {
            if(item.choosed == false) {
              flag = false
            }
          })
          this.tempAllChoosed = flag
        }, 
        deep: true
      },
      /**
       * 切换当前的全选与反选
       */
      'tempAllChoosed': {
        handler(newV, oldV) {
          if(newV) {
            this.tempList.forEach(item => {
              item.choosed = true
            })
          } else { // 从全选变为反选时 触发
            let flag = true
            this.tempList.forEach(item => {
              if(item.choosed == false) {
                flag = false
              }
            })
            if(flag) {
              this.tempList.forEach(item => {
                item.choosed = false
              })
            }
          }
        }, 
        deep: true
      }
    },
    methods: {
      unique(arr){
        return [...new Set(arr)];
      },
      returnChoosedNum(item) {
        let count = 0
        item.children.forEach(i => {
          i.choosed ? count++ : ''
        })
        return count || ''
      },
      getChoosed() {
        let array = []
        this.itemsOrigin.forEach(item => {
          item.children.forEach(i => {
            if(i.choosed) {
              array.push(i.id)
            }
          })
        })
        return this.unique(array)
      },
      getChoosedByName() {
        let array = []
        this.itemsOrigin.forEach(item => {
          item.children.forEach(i => {
            if(i.choosed) {
              array.push(i)
            }
          })
        })
        return this.unique(array)
      },
      getChoosedName() {
        let array = []
        this.itemsOrigin.forEach(item => {
          item.children.forEach(i => {
            if(i.choosed) {
              array.push(i.name)
            }
          })
        })
        return this.unique(array)
      },
      checkboxClicked() {
        this.$emit('changed', this.getChoosedByName())
      }
    }
  }
</script>

<style type="text/css" lang="less">
  .zoomze-side-choose {
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0;
      padding: 12px;
      padding-right: 12px;
      border-bottom: 1px solid #f5f5f5;
      .van-checkbox {
        padding-right: 0!important;
      }
    }
    .left-side-bar {
      width: 125px!important;
      background: #fafafa;
      overflow:auto;
    }
    .right-content {
      width: calc(100vw - 125px);
      overflow: auto;
      .van-checkbox {
        display: flex;
        justify-content: space-between;
        padding: 15px;
      }
      .active {
        color: #1989fa!important;
      }
    }
    .van-sidebar-item--select {
      border-color: #1989fa!important;
    }
    .van-sidebar-item {
      padding: 15px 12px 15px 8px;
    }
    .popup-wrap {
      position: relative;
      padding-top: 51px;
      .tool-wrap {
        position: absolute;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        top: 0;
        width: calc( 100vw - 30px );
        color: #333;
      }
      .popup-body {
        max-height: 65vh;
      }
      .van-radio, .van-checkbox {
        padding: 12px;
      }
      .active {
        color: #2E79FF;
      }
    }
  }
</style>